<template>
	<view class="recharge-box">
		<u-navbar title="充值积分" :autoBack="true" :fixed="true" bgColor="transparent" :placeholder="true"
			:titleStyle="{ color: '#333',fontSize: '16px',}"></u-navbar>
		<view class="user-info-box">
			<view class="user-info">
				<view class="score-title">当前积分</view>
				<view class="score-num">{{ userInfo.score ? userInfo.score : 0 }}</view>
			</view>
			<image class="score-bg" src="@/static/score.png"></image>
			<!-- <image class="blur-box" src="@/static/score-bg"></image> -->
		</view>
		<view class="top-config-list">
			<view v-for="(item, index) in levelList" :key="index"
				:class="currentId == item.id ?'top-config-item active':'top-config-item'" @click="currentId = item.id">
				<view class="tag-box" v-if="index == 0">首次充值</view>
				<view class="title">{{ item.score }}积分</view>
				<view class="content"> <span class="unit">¥</span>{{ item.price }}</view>
			</view>
		</view>
		<view class="submit-btn" @click="openMembership">立即充值</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getLevelList,
		rechargeMember
	} from "@/api/mine.js";
	export default {
		data() {
			return {
				currentId: "",
				levelList: [],
				userInfo: {},
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getLevelList();
		},
		methods: {
			async getUserInfo() {
				const res = await getUserInfo();
				if (res.response.statusCode === 200) {
					this.userInfo = res.data.data.userinfo;
				}
			},
			async getLevelList() {
				const res = await getLevelList();
				if (res.response.statusCode === 200) {
					this.levelList = res.data.data;
				}
			},
			async openMembership() {
				let that = this;
				this.currentId = this.currentId ? this.currentId : this.levelList[0].id;
				const res = await rechargeMember({
					id: this.currentId
				});
				if (res.response.statusCode === 200) {
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: res.data.data.timeStamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.package,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign,
						success: function(res) {
							uni.showToast({
								title: "充值成功！",
								icon: "success",
							});
							that.getUserInfo();
						},
						fail: function(err) {
							uni.showToast({
								title: "充值失败！",
								icon: "error",
							});
						},
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.recharge-box {
		padding: 24rpx;
		box-sizing: border-box;
		height: 400rpx;
		background: linear-gradient(179deg, #BDD3F7 0%, rgba(255, 255, 255, 0) 100%);

		.user-info-box {
			position: relative;
			margin-bottom: 40rpx;
			height: 250rpx;
			background: linear-gradient(90deg, #0095F8 0%, #56BCFF 100%);
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.score-bg {
				// position: absolute;
				width: 214rpx;
				height: 214rpx;
				padding-right: 40rpx;
				// top: 10rpx;
				// right: 28rpx;
			}

			.blur-box {
				position: absolute;
				bottom: -110rpx;
				left: 0;
				width: 100%;
				height: 128rpx;
			}

			.user-info {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: column;
				height: 100%;
				padding-top: 40rpx;
				padding-left: 40rpx;

				.score-title {
					color: #fff;
					margin-bottom: 12rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.85);
				}

				.score-num {
					font-size: 52rpx;
					color: #fff;
					font-weight: 600;
				}
			}
		}

		.submit-btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
			box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.5);
			background-color: rgba(0, 149, 248, 1);
		}

		.top-config-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12rpx;

			.top-config-item {
				width: 216rpx;
				height: 174rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 24rpx;
				border-radius: 16rpx;
				background: #FFFFFF;
				border: 2rpx solid rgba(135, 135, 167, 0.3);
				position: relative;

				.tag-box {
					position: absolute;
					top: -10rpx;
					left: 0;
					background-color: rgba(0, 149, 248, 1);
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}

				.title {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 12rpx;
				}

				.content {
					font-size: 48rpx;
					color: rgba(0, 149, 248, 1)
				}
			}

			.active {
				background: rgba(0, 149, 248, 0.06);
				border: 2rpx solid #0095F8;
			}
		}
	}
</style>